<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTool :show-before="true">
          <template v-slot:before>
            <el-button type="primary" size="small" @click="addClity">添加分类</el-button>
          </template>
          <template v-slot:after>
            <el-input class="search" placeholder="请输入关键字">
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </template>
        </PageTool>
        <template>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="image" label="图片" width="300px">
              <template v-slot="{row}">
                <img class="img" :src="row.image" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="300px" />
            <el-table-column prop="desc" label="描述" />
            <el-table-column prop="address" label="操作">
              <template v-slot="{ row }">
                <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delClasstify(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-row type="flex" justify="center">
            <el-pagination
              layout="prev, pager, next"
              :total="+total"
              :page-size="+params._limit"
              @current-change="currentChange"
            />
          </el-row>
        </template>
        <Dialog ref="from" :show-dialog.sync="showDialog" @updated="updated" />
      </el-card>
    </div>
  </div>
</template>
<script>
import { classList, delClistify, getCifyNumber } from '@/api/model/classity'
import Dialog from './Dialog/dialog.vue'
export default {
  components: { Dialog },
  data() {
    return {
      tableData: [
        {
          id: null,
          title: '',
          desc: '',
          image: ''
        }

      ],
      from: [],
      showDialog: false,
      total: '',
      params: {
        _limit: 5,
        _start: 0,
        title_contains: ''
      }

    }
  },
  async created() {
    await this.getCliatyList()
    // 获取分类数量
    const res = await getCifyNumber()
    console.log(res)
    this.total = res.data - 1
  },
  methods: {
    // 分页管理
    currentChange(page) {
      this.params._start = page * this.params._limit - 2
      // console.log(this.page._start)

      this.getCliatyList()
    },
    updated() {
      this.getCliatyList()
    },
    // 编辑分类
    async edit(id) {
      this.from.id = id
      this.showDialog = true
      this.$refs.from.getClassFity(id)
    },
    // 删除
    async delClasstify(id) {
      // console.log(id)
      // await delClistify(id)

      this.$confirm('确定删除该员工吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        await delClistify(id)
        this.getCliatyList()
      })
    },
    // 新增
    addClity() {
      this.showDialog = true
      this.getCliatyList()
    },
    // 获取列表
    async getCliatyList() {
      const res = await classList(this.params)
      // console.log(res)
      this.tableData = res.data
    }
  }
}

</script>
<style lang="scss" scoped>
// ::v-deep .el-table td {
// }
.img {
    height: 200px;
    width: 200px;
}

.page {
    margin-top: 30px;
}
</style>
